<template>

  <div class="params-group" v-for="(group, groupIndex) in goodsParams" :key="groupIndex">
    <div mt-20rpx ml-10rpx font-bold>{{
    group.groupName
  }}</div>
    <div class="param-list">
      <div class="param-item" v-for="(param, index) in group.goodsParamsItemDTOList" :key="index">
        <div class="param-left">{{ param.paramName }}</div>
        <div class="param-right">{{ param.paramValue }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const goodsParams = ref<any>([])
const props = defineProps({
  res: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

watch(() => props.res, async (val) => {
  goodsParams.value = val
}, { deep: true, immediate: true })
</script>

<style scoped lang="scss">
.param-list {
  padding: 40rpx 0 20rpx 0;
}

.param-item {
  display: flex;
  justify-content: center;
  border-bottom: none;

  >.param-left,
  >.param-right {
    padding: 16rpx 0;
    font-size: 24rpx;
    color: #666;
    border: 1px solid rgb(220, 223, 230);
    border-bottom: none;
  }

  >.param-left {
    text-align: center;
    border-right: none;
    flex: 3;
  }

  >.param-right {
    padding: 0 10rpx;
    align-items: center;
    display: flex;
    flex: 7;
  }
}

.param-item:nth-last-of-type(1) {

  >.param-left,
  >.param-right {
    border-bottom: 1px solid rgb(220, 223, 230);
  }
}
</style>
